﻿<!DOCTYPE html>
<head>
    <meta charset="UTF-8">

    <script type="text/javascript">

        const STUN_URL = "stun:stun.l.google.com:19302";
        const TURN_URL = "turn:coturn";
        const TURN_USERNAME = "user";
        const TURN_CREDENTIAL = "password";  
        const WEBSOCKET_URL = "ws://127.0.0.1:8081/"

        var pc, ws, dc;

        async function start() {
		    
			// Generate an RSA certificate for the peer connection
			//const rsaCert = await RTCPeerConnection.generateCertificate({
			//	name: "RSASSA-PKCS1-v1_5",  // Specify RSA algorithm
			//	modulusLength: 2048,        // Key size (2048-bit RSA)
			//	publicExponent: new Uint8Array([1, 0, 1]),
			//	hash: "SHA-256"             // Hash algorithm
			//});
			
            pc = new RTCPeerConnection({ 
                //iceServers: [{ urls: STUN_URL }]
                //iceServers: [
                //    {
                //        urls: TURN_URL,
                //        username: TURN_USERNAME,
                //        credential: TURN_CREDENTIAL
                //    }]
				 //certificates: [rsaCert]
			});

            dc = pc.createDataChannel("dc1");
            pc.ontrack = evt => document.querySelector('#audioCtl').srcObject = evt.streams[0];
            pc.onicecandidate = evt => evt.candidate && ws.send(JSON.stringify(evt.candidate));

            pc.ondatachannel = e => {
                console.log(`ondatachannel ${JSON.stringify(e.channel)}`);

                e.channel.onopen = (event) => console.log(`data channel onopen: ${event}.`);
                e.channel.onclose = (event) => console.log(`data channel onclose: ${event}.`);
                e.channel.onmessage = (event) => console.log(`data channel onmessage: ${event.data}.`);
            };

            // Diagnostics.
            pc.onicegatheringstatechange = () => console.log("onicegatheringstatechange: " + pc.iceGatheringState);
            pc.oniceconnectionstatechange = () => console.log("oniceconnectionstatechange: " + pc.iceConnectionState);
            pc.onsignalingstatechange = () => console.log("onsignalingstatechange: " + pc.signalingState);
            pc.onconnectionstatechange = () => console.log("onconnectionstatechange: " + pc.connectionState);

            dc.onopen = (event) => console.log(`data channel onopen: ${event}.`);
            dc.onclose = (event) => console.log(`data channel onclose: ${event}.`);
            dc.onmessage = (event) => console.log(`data channel onmessage: ${event.data}.`);

            // Signalling.
            ws = new WebSocket(document.querySelector('#websockurl').value, []);
            ws.onmessage = async function (evt) {
                if (/^[\{"'\s]*candidate/.test(evt.data)) {
                    pc.addIceCandidate(JSON.parse(evt.data));
                }
                else {
                    await pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(evt.data)));
                    pc.createAnswer()
                        .then((answer) => pc.setLocalDescription(answer))
                        .then(() => ws.send(JSON.stringify(pc.localDescription)));
                }
            };
        };

        async function closePeer() {
            await pc.close();
            await ws.close();
        };

    </script>
</head>
<body>

    <audio controls autoplay="autoplay" id="audioCtl"></audio>

    <div>
        <input type="text" id="websockurl" size="40" />
        <button type="button" class="btn btn-success" onclick="start();">Start</button>
        <button type="button" class="btn btn-success" onclick="closePeer();">Close</button>
    </div>

</body>

<script>
    document.querySelector('#websockurl').value = WEBSOCKET_URL;
</script>
